<template>
  <div class="common-header">
    <div class="commonheader-icon"
         @click="handleClickBack">
      <div class="iconfont back">&#xe6d7;</div>
    </div>
    <div class="title">{{title}}</div>
  </div>
</template>

<script>
export default {
  name: 'CommonHeader',
  props: {
    title: {
      type: String
    }
  },
  methods: {
    handleClickBack () {
      this.$router.back()
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.common-header
  display flex
  line-height 102px
  color(#050505)
  padding()
  box-shadow 0 3px 6px rgba(0, 0, 0, 0.2)

  .commonheader-icon
    width 52px
    line-height 102px
    text-align center

    .back
      font-size $fzThird

  .title
    font-size $fzOne
    line-height 102px
</style>
